<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>搜索页面</title>
	<link rel="shortcut icon" href="img/foodie.ico" />
	<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
	<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="css/seastyle.css" rel="stylesheet" type="text/css" />
	<!-- 分页css -->
	<link href="components/VuePaging/zpageNav.css" rel="stylesheet" />
	<script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
	<div id="search">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-show="!userIsLogin">
						<a href="login.html" target="_top" class="h">亲，请登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
					<div class="menu-hd" v-show="userIsLogin">
						<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
						<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
			</ul>
		</div>

		<!--悬浮搜索框-->
		<div class="nav white">
			<!-- <div class="logo"><img src="images/logo.png" /></div> -->
			<div class="logoBig">
				<li><a href="index.html"><img src="images/logobig.png" /></a></li>
			</div>

			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
						placeholder="搜索" autocomplete="off">
					<input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
				</form>
			</div>
		</div>

		<div class="clear"></div>
		<b class="line"></b>
		<div class="search">
			<div class="search-list">
				<div class="nav-table">
					<div class="long-title"><span class="all-goods">搜索页面</span></div>
				</div>


				<div class="am-g am-g-fixed">
					<div class="am-u-sm-12 am-u-md-12">
						<div class="search-content" style="width: 100%;">
							<div class="sort">
								<li :class="[{'first' : sort == 'k'}]" @click="chooseSort('k')"><a title="默认" href="javascript:void(0);">默认排序</a></li>
								<li :class="[{'first' : sort == 'c'}]" @click="chooseSort('c')"><a title="销量" href="javascript:void(0);">销量排序</a></li>
								<li :class="[{'first' : sort == 'p'}]" @click="chooseSort('p')"><a title="价格" href="javascript:void(0);">价格优先</a></li>
							</div>
							<div class="clear"></div>

							<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 boxes">
								
								<li v-for="(item, index) in itemsList" :key="index" @click="showItemDetail(item.itemId)">
									<div class="i-pic limit">
										<img :src="item.imgUrl" />
										<p class="title fl">{{item.itemName}}</p>
										<p class="price fl">
											<b>¥</b>
											<strong>{{item.price / 100}}</strong>
										</p>
										<p class="number fl">
											销量<span>{{item.sellCounts}}</span>
										</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="clear"></div>
						<!--分页 -->
						<!-- <ul class="am-pagination am-pagination-right">
							<li class="am-disabled"><a href="#">&laquo;</a></li>
							<li class="am-active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul> -->
						<!-- 分页 start-->
						<div class="wrap" id="wrap">
							<zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total" 
								v-bind:max-page="maxPage"  v-on:pagehandler="doPaging">
							</zpagenav>
						</div>
						<!-- 分页 end-->

					</div>
				</div>
				<div class="footer ">
					<div class="footer-hd ">
						<p>
							<a href="https://www.imooc.com/" target="_blank">慕课网</a><b>|</b>
							<a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a><b>|</b>
							<a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a><b>|</b>
							<a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a><b>|</b>
							<a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a>
						</p>
					</div>
					<div class="footer-bd ">
						<p><em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em></p>
					</div>
				</div>
			</div>

		</div>

		<!--引导 -->
		<div class="navCir">
			<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
			<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
		</div>

		<!--菜单 -->
		<div class="tip">
			<div id="sidebar">
				<div id="wrap">
					<div id="prof" class="item ">
						<a href="# ">
							<span class="setting "></span>
						</a>
						<div class="ibar_login_box status_login " style="height: 150px">
							<div class="avatar_box ">
								<p class="avatar_imgbox ">
									<img v-show="userIsLogin" :src="userInfo.face" />
									<img v-show="!userIsLogin" src="img/default-face.png" />
								</p>
								<ul class="user_info">
									<li v-show="!userIsLogin">用户未登录</li>
									<li v-show="userIsLogin">用户昵称：{{userInfo.nickname}}</li>
									<li v-show="userIsLogin" @click="logout">退出登录</li>
								</ul>
							</div>
							<i class="icon_arrow_white "></i>
						</div>

					</div>
					<div id="shopCart " class="item " @click="goToShopcart">
						<a href="# ">
							<span class="message "></span>
						</a>
						<p>购物车</p>
						<p class="cart_num ">{{shopcartItemCounts}}</p>
					</div>

					<div class="quick_toggle ">

						<li class="qtitem ">
							<a href="#top " class="return_top "><span class="top "></span></a>
						</li>
					</div>

					<!--回到顶部 -->
					<div id="quick_links_pop " class="quick_links_pop hide "></div>

				</div>

			</div>
		</div>
	</div>
	<script>
		window.jQuery || document.write('<script src="basic/js/jquery-1.9.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="basic/js/quick_links.js"></script>

	<div class="theme-popover-mask"></div>
	<script src="components/VuePaging/zpageNav.js"></script>
	<script type="text/javascript " src="js/app.js"></script>
	<script type="text/javascript">
		var index = new Vue({
			el: "#search",
			data: {
				keywords: null,
				sort: "k",
				page: 1,			// 分页页数
				pageSize: 20,		// 分页每页显示数量
				maxPage: 1,			// 总页数
				total: 1,			// 总记录数
				itemsList: [],

				shopcartItemCounts: 0,	// 购物车中商品的数量
			},
			created() {
				// var me = this;
				// 通过cookie判断用户是否登录
				this.judgeUserLoginStatus();

				// 从别的页面来的搜索
				var keywords = app.getUrlParam("keywords");
				if (keywords == null || keywords == undefined || keywords == '') {
					return;
				}
				this.keywords = keywords;

				var page = app.getUrlParam("page");
				if (page == null || page == undefined || page == '') {
					page = 1;
				}
				this.page = page;

				var pageSize = app.getUrlParam("pageSize");
				if (pageSize == null || pageSize == undefined || pageSize == '') {
					pageSize = 20;
				}
				this.pageSize = pageSize;
				this.searchInBackend(keywords, "k", page, pageSize);

				// 从购物车中拿到商品的数量
				this.shopcartItemCounts = app.getShopcartItemCounts();
			},
			methods: {
				goUserCenter() {
					// 判断用户是否登录
					var userIsLogin = this.userIsLogin;
					if (!userIsLogin) {
						// 用户未登录，则跳转
						window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
					} else {
						window.location.href = app.centerServerUrl;
					}
				},
				goToShopcart() {
					window.location.href = "shopcart.html";
				},
				// 分页实现方法 跳转到page页
                doPaging: function (page) {
                    this.page = page;
					this.searchInBackend(this.keywords, this.sort, page, this.pageSize);
                },
				showItemDetail(itemId){
					window.open("item.html?itemId=" + itemId);
				},
				chooseSort(sort) {
					// console.log(sort);
					this.sort = sort;
					var keywords = this.keywords;
					if (keywords == null || keywords == undefined || keywords == '') {
						return;
					}
					this.searchInBackend(keywords, sort, 1, 20);
				},
				doSearch() {
					var keywords = this.keywords;
					// console.log(keywords);
					if (keywords == null || keywords == undefined || keywords == '') {
						alert("搜索内容不能为空");
						return;
					}
					this.searchInBackend(keywords, "k", 1, 20);
				},
				searchInBackend(keywords, sort, page, pageSize) {
					// debugger;
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.get(serverUrl + '/items/search?keywords=' + keywords + "&sort=" + sort + "&page=" + page + "&pageSize=" + pageSize, {})
						.then(res => {
							if (res.data.status == 200) {
								var grid = res.data.data;
								var itemsList = grid.rows;
								this.itemsList = itemsList;

								var maxPage = grid.total;		// 获得总页数
								var total = grid.records;		// 获得总记录数
								
								this.maxPage = maxPage;
								this.total = total;

								// console.log(itemsList);
							} else if (res.data.status == 500) {
								alert(res.data.msg);
								return;
							}
						});
				},
				getRequest() {},
				postRequest() {},
				// 通过cookie判断用户是否登录
				judgeUserLoginStatus() {
					var userCookie = app.getCookie("user");
					if (userCookie != null && userCookie != undefined && userCookie != '') {
						var userInfoStr = decodeURIComponent(userCookie);
						// console.log(userInfo);
						if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
							var userInfo = JSON.parse(userInfoStr);
                            // 判断是否是一个对象
                            if ( typeof(userInfo)  == "object" ) {
                                this.userIsLogin = true;
                                // console.log(userInfo);
                                this.userInfo = userInfo;
                            } else {
                                this.userIsLogin = false;
                                this.userInfo = {};
                            }
						}
					} else {
						this.userIsLogin = false;
						this.userInfo = {};
					}
				},
				logout() {
					var userId = this.userInfo.id;
					var serverUrl = app.serverUrl;

					axios.defaults.withCredentials = true;
					axios.post(serverUrl + '/passport/logout?userId=' + userId, {})
						.then(res => {
							if (res.data.status == 200) {
								window.location.href = "index.html";
							} else if (res.data.status == 500) {
								alert(res.data.msg);
								return;
							}
						});
				}
			}
		});
	</script>
</body>

</html>